<template>
  <el-dialog :title="formdata.id? '编辑部门':'新增部门'" :visible="isShowDialog" @close="btnCancel">
    <el-form ref="formdata" :model="formdata" :rules="rules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formdata.name" style="width:80%" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formdata.code" style="width:80%" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="formdata.manager" style="width:80%">
          <el-option
            v-for="item in employeeList "
            :key="item.id"
            :value="item.username"
          />

        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formdata.introduce" style="width:80%" />
      </el-form-item>
    </el-form>
    <!-- 对话框底部有footer具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btn">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getSimpleList } from '@/api/employees'
import { addDepts, getDeptsDetail, eidtDepts } from '@/api/departments'
export default {

  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      formdata: { code: '', introduce: '', manager: '', name: '', pid: '' },
      rules: {
        code: [
          { required: true, message: '输入不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '输入字符应在2-10之间', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '输入不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '输入字符应在2-10之间', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '输入不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '输入字符应在2-10之间', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '输入不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '输入字符应在2-10之间', trigger: 'blur' }
        ]

      },
      employeeList: []

    }
  },
  async created() {
    //   获取负责人信息
    this.employeeList = await getSimpleList()
  },
  methods: {
    //   获取回显数据
    async getShowDialog(id) {
      // 根据id获取部门详情

      this.formdata = await getDeptsDetail(id)
    },

    async btn() {
      // 兜底校验
      await this.$refs.formdata.validate()
      // 判断是否有id
      console.log('这是id', this.formdata.id)
      if (this.formdata.id) {
        await eidtDepts(this.formdata)
        //   提示修改成功
        this.$message.success('修改成功')
      } else {
        //   提交数据发起请求
        await addDepts({ ...this.formdata, pid: this.id })
        //   提示新增成功
        this.$message.success('新增成功')
      }

      //   通知父组件更新页面
      this.$emit('resreload')
      // 通知父组件关窗口
      this.$emit('closeDialog')
      //   清除数据
      this.formdata = { code: '', introduce: '', manager: '', name: '', pid: '' }
    },
    btnCancel() {
      // 通知父组件关窗口
      this.$emit('closeDialog')
      //   清除数据
      this.formdata = { code: '', introduce: '', manager: '', name: '', pid: '' }
      //  清除报错
      this.$refs.formdata.resetFields()
    }
  }

}
</script>

<style>

</style>
